<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片查看器</title>
</head>

<body style="background: black;">
    <canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">您的浏览器尚不支持canvas</canvas>
    <canvas id="offCanvas" style="display: none">
    </canvas>

    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        var offCanvas = document.getElementById('offCanvas');
        var offContext = offCanvas.getContext('2d');

        var image = new Image();
        var scale;
        var isMouseDown = false;


        window.onload = function () {
            canvas.width = 1152;
            canvas.height = 768;
            image.src = 'src/img-lg.jpg';

            image.onload = function () {
                offCanvas.width = image.width;
                offCanvas.height = image.height;
                scale = offCanvas.width/canvas.width;

                context.drawImage(image, 0, 0, canvas.width, canvas.height);
                offContext.drawImage(image,0,0)
            }
        }

        function windowToCanvas(x, y) {
            var bbox = canvas.getBoundingClientRect();
            return {
                x: x - bbox.left,
                y: y - bbox.top
            }
        }

        canvas.onmousedown = function (e) {
            e.preventDefault()
            isMouseDown = true;
            point = windowToCanvas(e.clientX, e.clientY);
            drawCanvasWithMagnifier(true, point)
        }

        canvas.onmouseup = function (e) {
            e.preventDefault()
            isMouseDown = false;
            drawCanvasWithMagnifier(false);
        }

        canvas.onmouseout = function (e) {
            e.preventDefault()
            isMouseDown = false
            drawCanvasWithMagnifier( false )
        }

        canvas.onmousemove = function (e) {
            e.preventDefault()
            if(isMouseDown){
                point = windowToCanvas(e.clientX,e.clientY);
                drawCanvasWithMagnifier(true,point);
            }

        }

        function drawCanvasWithMagnifier(isShowMagnifier, point) {
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.drawImage(image, 0, 0, canvas.width, canvas.height);

            if (isShowMagnifier) {
                drawMagnifier(point);
            }
        }

        function drawMagnifier(point) {
            var mr = 200;
            //将缩小版图片上点击的位置映射到大图上
            var imageLG_cx = point.x*scale;
            var imageLG_cy = point.y*scale;

            //将大图上对应的点移动到圆心
            var sx = imageLG_cx - mr;
            var sy = imageLG_cy - mr;

            var dx = point.x - mr;
            var dy = point.y - mr;

            context.save();

            context.lineWidth=10;
            context.strokeStyle='#069';
            context.beginPath();
            context.arc(point.x, point.y, mr,0, 2*Math.PI, false);
            context.stroke();
            context.clip();
            context.drawImage(offCanvas, sx, sy, 2*mr, 2*mr,dx,dy,2*mr,2*mr);
            context.closePath();
            context.restore();
        }
    </script>
</body>

</html>